<template>
	<el-dialog
		width="1000px"
		top="0"
		class="dialog"
		:close-on-click-modal="false"
		:center="true"
		:visible.sync="isShow"
	>
		<template #title>
			<!-- 弹窗头部 -->
			<div class="title-box">
				<div class="title">编辑课件</div>
				<div class="form-hint">
					<span class="el-icon-warning" />因课件信息较多，将课件信息分开保存，在编辑信息时，请及时进行保存，关闭编辑页面后，未保存的信息将会丢失
				</div>
			</div>
		</template>
		<!-- 内容区域 -->
		<slot />
		<template #footer>
			<!-- 弹窗底部 -->
			<slot name="footer" />
		</template>
	</el-dialog>
</template>

<script>
	export default {
		props: {
			// 是否显示弹窗,可通过.sync进行绑定
			visibly: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				isShow: this.visibly // 内部的是否显示弹窗
			};
		},
		watch: {
			// 内部和外部的变量双向绑定
			isShow(val) {
				this.$emit("update:visibly", val);
			},
			visibly(val) {
				this.isShow = val;
			}
		}
	};
</script>

<style lang="less" scoped>
	/deep/ .el-dialog {
		margin-bottom: 0;
		max-height: 100%;
		display: flex;
		flex-direction: column;
	}
	/deep/ .el-dialog__header {
		flex-shrink: 0;
		height: 74px;
		box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 5;
	}
	/deep/ .el-dialog__body {
		background-color: #f4f5f9;
		padding: 8px 16px;
		flex-grow: 1;
		overflow: auto;
	}
	/deep/ .el-dialog__footer {
		flex-shrink: 0;
		box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 5;
	}
	.title-box {
		height: 100%;
		padding-left: 30px;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;

		.title {
			font-weight: bold;
			font-size: 16px;
			color: #3a3d4b;
		}

		.form-hint {
			padding: 0 10px;
			margin-left: 12px;
			font-size: 12px;
			color: #3a3d4b;
			line-height: 30px;
			background-color: #fffbe6;
			border: 1px solid #ffe58f;
			border-radius: 6px;

			.el-icon-warning {
				color: #ffa613;
				font-size: 15px;
				margin-right: 6px;
			}
		}
	}

	.footer-box {
		text-align: right;
	}
</style>
